<template>
	<view class="content1">
		<uni-popup type="bottom" ref="pickerView" >
			<view class="popup1 flex f-d-c a-i-c">
				<view class="picker-view-box flex f-d-c a-i-c">
					<picker-view class="pick-my" v-if="pickerType === '1'" indicator-style="height: 50px;" :value="value" @change="bindChange" indicator-class="color-2567F3">
						<picker-view-column>
							<view class="all-center" style="text-align: center;" v-for="(item, index) in provinces" :key="index">
								{{item.name}}
							</view>
						</picker-view-column>
						<picker-view-column>
							<view class="all-center" style="text-align: center;" v-for="(item, index) in city" :key="index">
								{{item.name}}
							</view>
						</picker-view-column>
					</picker-view>
					<picker-view class="pick-my" v-if="pickerType === '2'" indicator-style="height: 50px;" :value="value2" @change="bindChange1" indicator-class="color-2567F3">
						<picker-view-column>
							<view class="all-center" style="text-align: center;" v-for="(item, index) in class_list" :key="index">
								{{item.name}}
							</view>
						</picker-view-column>
					</picker-view>
					<picker-view class="pick-my" v-if="pickerType === '3'" indicator-style="height: 50px;" :value="value3" @change="bindChange2" indicator-class="color-2567F3">
						<picker-view-column>
							<view class="all-center" style="text-align: center;" v-for="(item, index) in money_list" :key="index">
								{{item}}
							</view>
						</picker-view-column>
					</picker-view>
					<picker-view class="pick-my" v-if="pickerType === '4'" indicator-style="height: 50px;" :value="value4" @change="bindChange3" indicator-class="color-2567F3">
						<picker-view-column>
							<view class="all-center" style="text-align: center;" v-for="(item, index) in age_list" :key="index">
								{{item !== '默认'?item+'年内':'默认'}}
							</view>
						</picker-view-column>
					</picker-view>
					<picker-view class="pick-my" v-if="pickerType === '7'" indicator-style="height: 50px;" :value="value5" @change="bindChange4" indicator-class="color-2567F3">
						<picker-view-column>
							<view class="all-center" style="text-align: center;" v-for="(item, index) in brank_list" :key="index">
								{{item.name}}
							</view>
						</picker-view-column>
					</picker-view>
					<view class="money-fanwei flex f-d-c j-c-c" v-if="pickerType === '5' || pickerType === '6'" >
						<view class="money-input color-333 f-s-32 flex a-i-c">
							最低<block v-if="pickerType === '5'">价格</block><block v-else>里程</block>：<input type="number" v-model="min_money" placeholder="请输入"/>
						</view>
						<view class="money-input color-333 f-s-32 flex a-i-c">
							最高<block v-if="pickerType === '5'">价格</block><block v-else>里程</block>：<input type="number" v-model="max_money" placeholder="请输入"/>
						</view>
					</view>
				</view>
				<view class="bottom-btn-box flex a-i-c f-s-30">
					<view class="item all-center btn1" @click="close(false)">
						取消
					</view>
					<view class="item all-center btn2" :style="{background}" @click="close(true)">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {mapMutations,mapGetters} from "vuex"
	// import {addressList} from "@/static/js/addressList.js"
	import {getStorClassList} from "/utils/pagePublic.js"
	export default {
		name:"pickerView",
		props:{
			pickerType:{
				type:String,
				default:"1"
			},
			background:{
				type:String,
				default:"#2567F3"
			},
			isState:{
				type:Boolean,
				default(){
					return false
				}
			}
		},
		data() {
			return {
				max_money:"30000",
				min_money:"0",
				provinces:[],
				city:[],
				area:[],
				value:[0,0,0],
				class_list:[],
				value2:[0],
				value3:[0],
				value4:[0],
				value5:[0],
				money_list:[
					'0-3000',
					'3000-6000',
					'6000-9000',
					'9000-9000以上'
				],
				age_list:[
					'1','2','3','4','5',"默认"
				],
				brank_list:[]
			};
		},
		computed:{
			...mapGetters(["addressList"]),
		},
		watch:{
			
		},
		mounted() {
			let that = this
			that.class_list = [{
				id:"0",
				name:"全部",
				type_text: "",
				flag_text: "",
				parent: null
			},...that.$store.state.send_car_mode] 
			console.log(that.class_list,"that.class_list")
			that.brank_list.push({
				id:"",
				name:"默认"
			})
			that.$store.state.brand_list.map(val=>{
				val.children.map(value=>{
					that.brank_list.push(value)
				})
			})
			console.log(this.$store.state.brand_list)
		},
		methods:{
			// ...mapMutations(['changenav_address']),
			bindChange(e){
				let that = this
				let cur = e.detail.value
				if(this.value[0] !== cur[0]){
					that.getClassList(that.provinces[cur[0]].id,1,(a)=>{
						uni.hideLoading()
						that.city = a.data
						that.$refs.pickerView.open()
					})
				}
				this.value = cur
			},
			bindChange4(e){
				this.value5[0] = e.detail.value[0]
			},
			bindChange3(e){
				this.value4[0] = e.detail.value[0]
			},
			bindChange1(e){
				this.value2[0] = e.detail.value[0]
				console.log(e)
			},
			bindChange2(e){
				this.value3[0] = e.detail.value[0]
			},
			show(isopen = false){
				let that = this
				
				if(this.pickerType !== '1'){
					that.$refs.pickerView.open()
					return
				}
				getStorClassList(0,0,(res)=>{
					that.provinces = res.data
					getStorClassList(res.data[0].id,1,(a)=>{
						uni.hideLoading()
						that.city = a.data
						that.$refs.pickerView.open()
					})
				})
				// isopen && that.getClassList(that.provinces[taht.value[0]].id,1)
				// console.log(this.addressList,"addressList")
				// this.provinces = this.addressList[0]
				// this.city = this.addressList[1]
				// this.area = this.addressList[2]
			},
			getClassList(pid = 0,deep = 0,callback){
				let that = this
				that.util.postRequest({
					url:"v1/merchant/getPartsClass",
					data:{
						pid:pid
						// disposable:true
					}
				}).then(res=>{
					callback(res)
				})
			},
			close(isEnter = false){
				let classB = {}
				if(this.pickerType === '1'){
					if(isEnter){
						classB = {
							deep:this.provinces[this.value[0]],
							deep1:this.city[this.value[1]],
						}
						
					}
				}
				if(this.pickerType === '2'){
					classB = {
						...this.class_list[this.value2[0]]
					}
				}
				if(this.pickerType === '3'){
					classB = {
						money:this.money_list[this.value3[0]]
					}
				}
				if(this.pickerType === '4'){
					classB = {
						age:this.age_list[this.value4[0]]
					}
				}
				if(this.pickerType === '5' || this.pickerType === '6'){
					if(this.min_money ==='' || this.min_money ===''){
						uni.showToast({
							title:"请输入完整区间",
							icon:"none"
						})
						return
					}
					classB = {
						min:this.min_money,
						max:this.max_money
					}
				}
				if(this.pickerType === '7'){
					classB = {
						...this.brank_list[this.value5[0]]
					}
				}
				this.$emit("classBack",classB)
				this.$refs.pickerView.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.money-fanwei{
		width: 100%;
		padding: 30rpx;
		height: 100%;
		.money-input{
			width: 100%;
			margin-bottom: 30rpx;
			input{
				border-bottom: 2rpx solid #EFEFEF;
				margin-left: 30rpx;
				height: 60rpx;
			}
		}
	}
	.picker-view-box{
		width: 750upx;
		height: calc(100% - 96upx);
		.pick-my{
			width: 100%;
			height: 100%;
		}
	}
	.bottom-btn-box{
		.item{
			width: 272upx;
			height: 96upx;
			border-radius: 128upx;
		}
		.btn1{
			border: 2upx solid #979797;
			color: #979797;
			margin-right: 10upx;
		}
		.btn2{
			color: #FFFFFF;
		}
	}
	.popup1{
		width: 750upx;
		height: 594upx;
		background: #ffffff;
		padding-bottom: 68upx;
		position: relative;
		z-index: 999;
		border-radius: 40upx 40upx 0px 0px;
	}
</style>